import React from "react";
import styles from "./index.module.scss";
import { NavBar, Button } from "antd-mobile";
export default function index() {
  let BtnStyle = {
    "--border-color": "#afeae0",
    "--text-color": "#afeae0",
    marginLeft: 5,
  };
  return (
    <div className={styles.box}>
      <NavBar
        style={{
          "--height": "36px",
          "--border-bottom": "1px #eee solid",
          backgroundColor: "white",
          position: "fixed",
          width: "100%",
          left: "0",
          top: "0",
        }}
      >
        听故事
      </NavBar>
      <div className={styles.navbar}>
        <div>
          <Button color="primary" fill="outline" style={BtnStyle}>
            国语
          </Button>
          <Button color="primary" fill="outline" style={BtnStyle}>
            英语
          </Button>
        </div>
        <div>
          <span className="iconfont icon-24gl-repeat2"></span>
          <span>连续播放</span>
        </div>
      </div>
      <div className={styles.list}>
        <ul>
          <li>
            <img src="src\images\touxiang02.jpg" alt="" />
            <div>
              <p>棕色的熊、棕色的熊，你在阿萨大大</p>
              <div>
                <div>
                  <p>
                    <span className="iconfont icon-shiting"></span>
                    <span>03:48</span>
                    <span className="iconfont icon-shiting"></span>
                    <span>594.1k</span>
                  </p>
                  <div>
                    <img src="src\images\touxiang01.jpg" alt="" />
                    <span>名字</span>
                  </div>
                </div>
                <div>
                  <p>
                    <span className="iconfont icon-bofang"></span>
                    <span>播放</span>
                  </p>
                </div>
              </div>
            </div>
          </li>
          <li>
            <img src="src\images\touxiang02.jpg" alt="" />
            <div>
              <p>棕色的熊、棕色的熊，你在阿萨大大</p>
              <div>
                <div>
                  <p>
                    <span className="iconfont icon-shiting"></span>
                    <span>03:48</span>
                    <span className="iconfont icon-shiting"></span>
                    <span>594.1k</span>
                  </p>
                  <div>
                    <img src="src\images\touxiang01.jpg" alt="" />
                    <span>名字</span>
                  </div>
                </div>
                <div>
                  <p>
                    <span className="iconfont icon-bofang"></span>
                    <span>播放</span>
                  </p>
                </div>
              </div>
            </div>
          </li>
          <li>
            <img src="src\images\touxiang02.jpg" alt="" />
            <div>
              <p>棕色的熊、棕色的熊，你在阿萨大大</p>
              <div>
                <div>
                  <p>
                    <span className="iconfont icon-shiting"></span>
                    <span>03:48</span>
                    <span className="iconfont icon-shiting"></span>
                    <span>594.1k</span>
                  </p>
                  <div>
                    <img src="src\images\touxiang01.jpg" alt="" />
                    <span>名字</span>
                  </div>
                </div>
                <div>
                  <p>
                    <span className="iconfont icon-bofang"></span>
                    <span>播放</span>
                  </p>
                </div>
              </div>
            </div>
          </li>
          <li>
            <img src="src\images\touxiang02.jpg" alt="" />
            <div>
              <p>棕色的熊、棕色的熊，你在阿萨大大</p>
              <div>
                <div>
                  <p>
                    <span className="iconfont icon-shiting"></span>
                    <span>03:48</span>
                    <span className="iconfont icon-shiting"></span>
                    <span>594.1k</span>
                  </p>
                  <div>
                    <img src="src\images\touxiang01.jpg" alt="" />
                    <span>名字</span>
                  </div>
                </div>
                <div>
                  <p>
                    <span className="iconfont icon-bofang"></span>
                    <span>播放</span>
                  </p>
                </div>
              </div>
            </div>
          </li>
          <li>
            <img src="src\images\touxiang02.jpg" alt="" />
            <div>
              <p>棕色的熊、棕色的熊，你在阿萨大大</p>
              <div>
                <div>
                  <p>
                    <span className="iconfont icon-shiting"></span>
                    <span>03:48</span>
                    <span className="iconfont icon-shiting"></span>
                    <span>594.1k</span>
                  </p>
                  <div>
                    <img src="src\images\touxiang01.jpg" alt="" />
                    <span>名字</span>
                  </div>
                </div>
                <div>
                  <p>
                    <span className="iconfont icon-bofang"></span>
                    <span>播放</span>
                  </p>
                </div>
              </div>
            </div>
          </li>
          <li>
            <img src="src\images\touxiang02.jpg" alt="" />
            <div>
              <p>棕色的熊、棕色的熊，你在阿萨大大</p>
              <div>
                <div>
                  <p>
                    <span className="iconfont icon-shiting"></span>
                    <span>03:48</span>
                    <span className="iconfont icon-shiting"></span>
                    <span>594.1k</span>
                  </p>
                  <div>
                    <img src="src\images\touxiang01.jpg" alt="" />
                    <span>名字</span>
                  </div>
                </div>
                <div>
                  <p>
                    <span className="iconfont icon-bofang"></span>
                    <span>播放</span>
                  </p>
                </div>
              </div>
            </div>
          </li>
        </ul>
      </div>
    </div>
  );
}
